<script setup lang="ts">
import { UseElementSize } from '@peng_kai/kit/libs/vueuse';
import ExCard from '../ExCard.vue';
import { vContainerQuery } from '~/directives';
</script>

<template>
  <div>
    <ExCard title="容器查询指令">
      <KeepAlive>
        <UseElementSize
          class="h-20 resize overflow-hidden bg-blue/50" :width="100" :height="100"
          #="{width, height}"
        >
          <div class="text-center">
            {{ width }}x{{ height }}
          </div>
          <div
            v-container-query="{ '300<$<=600': { class: '!bg-brand' }, '$<300': { 'data-cq': 'sm' } }"
            class="group/cq h-full flex-center"
          >
            <div class="group-[[data-cq=sm]]/cq:(text-xl text-green)">
              123
            </div>
          </div>
        </UseElementSize>
      </KeepAlive>
    </ExCard>
  </div>
</template>
